<template>
  <div class="component-container">
    <el-card shadow="never">
      <el-form :model="value" :rules="rules" ref="houseConfigForm" label-width="130px" style="width: 80%" size="small">
        <el-form-item label="房屋配置：" >
          <template>
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
              <el-checkbox v-for="config in houseConfigs" :label="config" :key="config">{{config}}</el-checkbox>
            </el-checkbox-group>
          </template>
        </el-form-item>
        <el-form-item label="房屋亮点：" prop="tags">
          <el-checkbox-group v-model="selectTags">
            <el-checkbox
              v-for="dict in dict.type.house_highlights"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="装修情况：" prop="decoration">
          <el-radio-group v-model="value.decoration">
            <el-radio
              v-for="dict in dict.type.house_decoration"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="房源状态：" prop="state">
          <el-radio-group v-model="value.state">
            <el-radio
              v-for="dict in dict.type.house_states"
              :key="dict.value"
              :label="parseInt(dict.value)"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="可入住日期：" prop="rzDate">
          <el-date-picker v-model="value.rzDate" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="可看房时间：">
          <el-radio-group v-model="value.viewTime">
            <el-radio
              v-for="dict in dict.type.house_view_time"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="房屋描述：">
          <tinymce :width="595" :height="300" v-model="value.ramark"></tinymce>
        </el-form-item>
        <el-form-item label="房屋图片/视频：">
          <multi-upload v-model="selectHousePics"></multi-upload>
        </el-form-item>
        <el-form-item style="text-align: center">
          <el-button size="medium" @click="handlePrev">上一步，填写房源信息</el-button>
          <el-button type="primary" size="medium" @click="handleNext('houseConfigForm')">下一步，填写费用信息</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  import Tinymce from '@/components/Tinymce'
  import MultiUpload from '@/components/Upload/multiUpload2'
  import {listConfigAll} from '@/api/basic/config'

  export  default {
    name: "HouseConfigDetail",
    dicts: ['house_highlights','house_decoration','house_states','house_view_time'],
    components: { Tinymce, MultiUpload,},
    props: {
      value: Object,
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        checkAll: false,
        // 所有配置
        houseConfigs: [],
        // 表示 checkbox 的不确定状态，一般用于实现全选的效果
        isIndeterminate: true,
        rules: {
          rzDate: [
            {required: true, message: '请输入可入住日期', trigger: 'change'},
          ],
        }
      }
    },
    created() {
      this.getAllConfig();
    },
    computed: {
      // 选中配置
      checkedCities: {
        get() {
          let list = [];
          if (this.value.config === undefined || this.value.config == null || this.value.config === '') return list;
          let ids = this.value.config.split(',');
          for (let i = 0; i < ids.length; i++) {
            list.push((ids[i]));
          }
          return list;
        },
        set(newValue) {
          let config = '';
          if (newValue != null && newValue.length > 0) {
            for (let i = 0; i < newValue.length; i++) {
              config += newValue[i] + ',';
            }
            if (config.endsWith(',')) {
              config = config.substr(0, config.length - 1)
            }
            this.value.config = config;
          } else {
            this.value.config = null;
          }
        }
      },
      // 选中的房屋亮点
      selectTags: {
        get() {
          let list = [];
          if (this.value.tags === undefined || this.value.tags == null || this.value.tags === '') return list;
          let ids = this.value.tags.split(',');
          for (let i = 0; i < ids.length; i++) {
            list.push((ids[i]));
          }
          return list;
        },
        set(newValue) {
          let tags = '';
          if (newValue != null && newValue.length > 0) {
            for (let i = 0; i < newValue.length; i++) {
              tags += newValue[i] + ',';
            }
            if (tags.endsWith(',')) {
              tags = tags.substr(0, tags.length - 1)
            }
            this.value.tags = tags;
          } else {
            this.value.tags = null;
          }
        }
      },
      // 房源图片
      selectHousePics: {
        get:function () {
          let pics = [];
          if(this.value.housePics===undefined||this.value.housePics==null||this.value.housePics===''){
            return pics;
          }
          let housePics = this.value.housePics.split(',');
          for(let i=0;i<housePics.length;i++){
            pics.push(housePics[i]);
          }
          return pics;
        },
        set:function (newValue) {
          if (newValue == null || newValue.length === 0) {
            this.value.housePics = null;
          } else {
            this.value.housePics = '';
            if (newValue.length > 0) {
              for (let i = 0; i < newValue.length; i++) {
                this.value.housePics += newValue[i];
                if (i !== newValue.length - 1) {
                  this.value.housePics += ',';
                }
              }
            }
          }
        }
      }
    },
    methods: {
      getAllConfig() {
        listConfigAll().then(res => {
          if (res.code === 200) {
            this.houseConfigs = res.data.map(item => item.configName)
          }
        })
      },
      handleCheckAllChange(val) {
        this.checkedCities = val ? this.houseConfigs : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.houseConfigs.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.houseConfigs.length;
      },
      handlePrev() {
        this.$emit('prev')
      },
      handleNext(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$emit('next');
          } else {
            this.$message({
              message: '验证失败',
              type: 'error',
              duration:1000
            });
            return false;
          }
        });
      },
    },
  }
</script>
